import * as React from "react"
import { observer, inject } from "mobx-react"
import {
  Text,
  View,
  TextInput,
  Image,
  TouchableWithoutFeedback,
  ViewStyle,
  TextStyle
} from "react-native"
import { Screen, Button } from "../../components"
import { NavigationScreenProps } from "react-navigation"
import { px2dp } from "../../utils"
import { RegisterHeader } from "../../components/register-header"

export interface RegisterScreenProps extends NavigationScreenProps<{}> {
  rootStore: any
}

export interface RegisterScreenState {}

const viewStyle: ViewStyle = {
  padding: px2dp(38)
}

const verificationStyle: ViewStyle = {
  flexDirection: "row",
  justifyContent: "space-between"
}

const loginTextStyle: TextStyle = {
  marginTop: px2dp(10),
  textAlign: "center",
  fontSize: px2dp(14)
}

@inject("rootStore")
@observer
export default class RegisterScreen extends React.Component<
  RegisterScreenProps,
  RegisterScreenState
> {
  state = {
    user: "",
    psw: ""
  }

  componentDidMount() {
    console.log(this.props)
  }

  registerStepTwo = navigation => {
    const { registerStore, globalStore } = this.props.rootStore
    registerStore.RegisterStep2(navigation, globalStore)
  }

  render() {
    const { registerStore } = this.props.rootStore
    return (
      <Screen>
        {registerStore.registerStep === 1 ? (
          <View style={viewStyle}>
            <RegisterHeader title="用户名注册" subTitle="注册即代表阅读并同意使用条款和隐私政策" />
            <View style={{ borderBottomWidth: 1, borderColor: "#f3f4f6" }}>
              <Text style={{ color: "#6d788e" }}>请输入用户名</Text>
              <TextInput
                style={{ height: 40 }}
                onChangeText={text => registerStore.usernameOnChange(text)}
                value={registerStore.username}
              />
            </View>
            <View style={{ borderBottomWidth: 1, borderColor: "#f3f4f6" }}>
              <Text style={{ color: "#6d788e" }}>请输入验证码</Text>
              <View style={verificationStyle}>
                <TextInput
                  style={{ height: 40, flex: 1 }}
                  onChangeText={text => registerStore.imgCodeOnChange(text)}
                  value={registerStore.imgCode}
                />
                <TouchableWithoutFeedback onPress={() => registerStore.imageChange()}>
                  <Image
                    style={{ width: 80, height: 36 }}
                    source={{
                      uri: `http://m.ld1121.com/api/gl/image/code?uuid=${registerStore.uuid}&_t=${registerStore.random}`
                    }}
                  />
                </TouchableWithoutFeedback>
              </View>
            </View>
            <Button
              style={{ backgroundColor: "#cf2a2a", height: 50, marginTop: 40 }}
              onPress={() => registerStore.RegisterStep1()}
            >
              下一步
            </Button>
            <Text style={loginTextStyle}>已有账号, 登录</Text>
          </View>
        ) : null}
        {registerStore.registerStep === 2 ? (
          <View style={viewStyle}>
            <RegisterHeader
              title="设置新密码"
              subTitle="请设置长度为6~12位数字,字母或字母+数字组合"
            />
            <View style={{ borderBottomWidth: 1, borderColor: "#f3f4f6" }}>
              <Text style={{ color: "#6d788e" }}>请输入密码</Text>
              <TextInput
                style={{ height: 40 }}
                onChangeText={text => registerStore.passwordOnChange(text)}
                value={registerStore.password}
              />
            </View>
            <Button
              style={{ backgroundColor: "#cf2a2a", height: 50, marginTop: 40 }}
              onPress={() => this.registerStepTwo(this.props.navigation)}
            >
              保存设置
            </Button>
          </View>
        ) : null}
      </Screen>
    )
  }
}
